<template>
  <div class="body">
    <div class="head">
      <div class="left">
        <div class="top_ul">
          <ul>
            <li class="ulborder" @click="couponP">送优惠券</li>
            <li :class=" multipleSelection && multipleSelection.length > 0? 'default': 'ulborders'">批量删除</li>
          </ul>
        </div>
      </div>
      <div class="center"></div>
      <div class="right">
        <div class="search">
          <el-input
            size="small"
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-select
              v-model="select"
              slot="prepend"
              placeholder="手机号"
              style="width: 100px"
            >
              <el-option label="手机号" value="1"></el-option>
              <el-option label="客户姓名" value="2"></el-option>
            </el-select>
            <el-button slot="append" @click="seach(select)">搜索</el-button>
          </el-input>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        stripe
        height="65vh"
        @selection-change="handleSelectionChange"
        style="width: 100%"
        :header-cell-style="{
              color: '#3D3D3D',
              'font-size': '22px',
              height: '60px',
              'font-weight': '400',
              'background-color': '#F8F9FB',
              'border-bottom': 'none',
            }"
        :row-class-name="tableRowClassName"
        class="customer-table"
      >
        <el-table-column type="selection" width="30%"> </el-table-column>
        <el-table-column label="客户头像"  main-width="12%">
          <template slot-scope="scope">
            <div>
              <img
                :src="scope.row.head_pic"
                srcset=""
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="客户手机号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="客户姓名"
          main-width="12%"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="reg_time" label="成为客户时间" align="center" width="150">
        </el-table-column>
        <el-table-column
          prop="recent_consumption"
          label="最近消费时间"
          width="170"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="consumption_quota"
          label="消费额"
          main-width="5%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="consumption_frequency"
          label="消费次数"
          main-width="6%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="user_money"
          label="账户余额"
          main-width="7%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="recent_times"
          label="积分余额"
          main-width="7%"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" main-width="12%" align="center">
          <template slot-scope="scope">
            <button @click="details(scope.row)">详情</button>
            <button v-if="scope.row.is_lock==0" @click="frozenOpen(scope.$index,scope.row)">冻结</button>
            <button v-if="scope.row.is_lock==1" @click="frozenOpen(scope.$index,scope.row)">解冻</button>

            <CustomerFrozen :user_ids="user_id" ref="Popup" :frozen_index="frozenNumber" @frozenChange="frozenChange"></CustomerFrozen><!-- 冻结对话框 -->
            <Customerthaw :user_ids="user_id" ref="Popups" :frozen_index="frozenNumber" @frozenChange="frozenChange"></Customerthaw><!-- 解除冻结对话框 -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagiton">
      <button class="btn-default" type="submit" @click="prePage">
        <i class="el-icon-caret-left"></i>
      </button>
      <button class="btn-defaults" type="submit">{{ current_page }}</button>
      <button
        class="btn-default"
        type="submit"
        @click="nextPage"
        :class="{ disabled: disableds }"
      >
        <i class="el-icon-caret-right"></i>
      </button>
      <div class="remarks">
        共 <span> {{ pagesize }} </span>条当前为第
        <span> {{ currentPage }} </span>页
      </div>
    </div>
    </div>
    <CustomerCoupon ref="Coupon"></CustomerCoupon>
  </div>
</template>

<script>
import CustomerFrozen from "./CustomerFrozen.vue"; // 冻结对话框
import Customerthaw from "./Customerthaw.vue"; // 解除冻结对话框
import CustomerCoupon from "./CustomerCoupon.vue"; // 详情对话框
export default {
  components: {
    CustomerFrozen,
    Customerthaw,
    CustomerCoupon,
  },
  data() {
    return {
      user_id:'',
      input3: "", // 搜索内容
      select: "手机号", // 默认选择搜索项
      currentPage: 1, //当前页号
      pagesize: 20, //每页大小
      disableds: false,
      frozenNumber:"", // 处理冻结的序号
      // 主数据
      tableData: [],
      style:"",//搜索手机号和客户姓名状态
      multipleSelection: "", // 所选择的主数据
    };
  },
  computed: {
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.tableData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    },
  },
  methods: {
    seach(select){
      // if(this.input3==''){
      //   this.$message({
      //     type: "info",
      //     message: "请输入搜索内容",
      //   });
      // }else{
        this.style = select
        this.list()
      // }
    },
    //列表
    list(){
      this.$axios({
        method: 'post',
        url:'/User/index',
        params:{
          kw:this.input3,
          style:this.style
        }
      })
      .then((res) => {
        console.log(res,"用户列表")
        if(res.data.data.length<20){
          this.disableds=true
        }else{
          this.disableds=false
        }
        this.tableData = res.data.data
      })
    },
    // 跳转详情页面
    details(row) {
      console.log(row,"row")
      this.$router.push({
        path:'/customer/CustomerDetails',
        query:{
          user_id:row.user_id,
          mobile:row.mobile
        }
      });
    },
    // 送优惠券对话框页面
    couponP() {
      this.$refs.Coupon.centerDialogVisible = true;
    },
    // 冻结客户对话框页面
    frozenOpen(index,row) {
      this.frozenNumber = index;
      this.user_id = row.user_id
      if(row.is_lock==1){
        this.$refs.Popups.centerDialogVisible = true;
      }else{
        this.$refs.Popup.centerDialogVisible = true;
      }
    },
    // 改变冻结状态
    frozenChange(index,state) {
      this.tableData[index].is_lock = state;
    },
    // 序号选择操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //隔行换色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
      return 'warning-row';
      } else{
      return 'success-row';
      }
    },
    //分页
    prePage() {
      this.disableds = false;
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage = this.currentPage - 1;
      //   this.getdata(); // 数据查询
    },
    // 切换页码
    nextPage() {
      if (this.currentPage == Math.ceil(this.tableData.length)) {
        return;
      }
      this.currentPage = this.currentPage + 1;
      // this.getdata();
    },
  },
  created(){
    this.list()
  }
}
</script>
<style src="../../components/css/customer_css/customerlist.css"  scoped>
</style>